import React from "react";
import LinearProgress from "@mui/material/LinearProgress";
import { Button } from "@mui/material";
import icon from "@/assets/images/home/subject.png";
import "./subjectitem.less";
import { useNavigate } from "react-router-dom";

interface Props {
  data: IExamModel;
}

export default function SubjectItem({ data }: Props) {
  let cur = Math.round(Math.random() * data.itemCount);
  const navigate = useNavigate();
  return (
    <div className="sub-item">
      <section>
        <img src={icon} alt="" />{" "}
      </section>
      <section className="mid">
        <h4>{data.title}</h4>
        <p>
          {cur}/{data.itemCount}题
        </p>
        <LinearProgress
          variant="determinate"
          value={(cur / data.itemCount) * 100}
        />
      </section>
      <section>
        <Button
          onClick={() => navigate(`/select/${data.actionCode}`)}
          variant="contained"
        >
          练习
        </Button>
      </section>
    </div>
  );
}
